package myJs.common

import myJs.api.Api
import myJs.cps.Style
import org.scalajs.dom.html
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useState
import slinky.core.facade.React
import slinky.web.html._
import typings.csstype.csstypeStrings

/**
 * Created by yz on 21/1/2022
 */
@react object AppendViewCp {

  case class Props(serverFiles: List[String], folder: String, id: String, testId: Int, show: Boolean = false)

  val component = FunctionalComponent[Props] { props =>

    object FTool {

    }

    val serverViewUrl = s"${Api.apiUrl}/panda/sample/viewFile"
    val downloadUrl = s"${Api.apiUrl}/panda/sample/downloadFile"

    div(style := Style(display = csstypeStrings.flex),
      props.serverFiles.zipWithIndex.map { case (file, curI) =>
        div(key := s"${curI}", style := Style(marginRight = 20, width = 100, display = csstypeStrings.`inline-block`),
          div(style := Style(width = 100, height = 100, border = "3 px solid #fff",
            boxShadow = " 0 .1rem 1rem .25rem rgba(0,0,0,.05)", borderRadius = "0.475rem", display = csstypeStrings.flex,
            flexDirection = csstypeStrings.column),
            className := "myImgDiv",
            div(style := Style(display = csstypeStrings.flex, justifyContent = csstypeStrings.center, marginTop = 15),
              i(style := Style(fontSize = 25), className := "fa fa-file-o")
            ),
            span(style := Style(display = csstypeStrings.flex, alignItems = csstypeStrings.`flex-end`, flex = 1,
              justifyContent = csstypeStrings.center, marginBottom = 5, paddingLeft = 5, paddingRight = 5,
              textAlign = csstypeStrings.center, wordWrap = csstypeStrings.`break-word`,
              wordBreak = csstypeStrings.`break-all`),
              className := "filePath",

              if (props.show) {
                span(className := "filePathA",
                  a(style := Style(marginRight = 5, fontSize = 15),
                    href := s"${downloadUrl}?folder=${props.folder}&fileName=${file}&sampleId=${props.id}&testId=${props.testId}",
                    i(className := "fa fa-download")
                  ),
                  " ",
                  a(title := file,
                    href := s"${serverViewUrl}?folder=${props.folder}&fileName=${file}&sampleId=${props.id}&testId=${props.testId}",
                    target := "_blank", file),
                )
              } else {
                span(className := "filePathA", title := s"${file}",
                  file
                )
              }
            )

          ),

        )
      },

    )

  }

}
